<!-- 采集系统情况 -->
<template>
    <div class="assy">
        <div class="assy-total">
          今日访问系统
          <span>
            <i v-for="item in totalArr" :key="item">{{ item }}</i>
          </span>
          &nbsp;次
        </div>
        <div class="assy-main">
            <div class="assy-main-inner">
                <img src="@/assets/images/housing/bg.png" alt="">
                <div class="num">
                    <span>
                        <i v-for="item in totalArr2" :key="item">{{ item }}</i>
                    </span>
                    累计访问次数
                </div>
            </div>
            <div class="assy-list">
                <div class="assy-item" v-for="(item,index) in list" :key="index">
                    <span class="assy-item-title">{{ item.province }}<i>{{ item.allNum }}</i></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getSystemSituation } from '@/api/housingFacilities.js';
const totalArr = ref([]);
const totalArr2 = ref([]);
const list = ref([]);

function getData() {
    //系统采集情况
    getSystemSituation().then((res) => {
        totalArr.value = res.data.visitsTodayNumTimes ? Array.from(String(res.data.visitsTodayNumTimes)) : [];
        totalArr2.value = res.data.visitsAccrueNumTimes ? Array.from(String(res.data.visitsAccrueNumTimes)) : [];
        list.value = res.data.fwCollectionSystemSituations
    });
}

// 挂载完成
onMounted(() => {
    getData();
})


</script>
<style lang='scss' scoped>
.assy{
   width: 450px;
   height: 240px;
    &-total{
      width: 320px;
      height: 45px;
      margin: 15px auto 0;
      background-size: 100% 100%;
      background-image: url('@/assets/images/housing/bg_num.png');
      font-size: 18px;
      color: #fff;
      line-height: 45px;
      padding-left: 62px;
      box-sizing: border-box;
      display: flex;
      span {
        font-family: DS-Digital;
        font-weight: 600;
        font-size: 32px;
        padding-top: 6px;
        display: flex;
        margin-left: 8px;
        i {
          display: block;
          width: 22px;
          height: 30px;
          background: #004c86;
          margin: 0 2px;
          font-style: normal;
          line-height: 30px;
          text-align: center;
          color:#46ffff;
        }
      }
    }

    &-main{
        width: 450px;
        height: 200px;
        position: relative;
        color: #fff;
        padding-top: 65px;
        box-sizing: border-box;

        &-inner{
            font-size: 12px;
            text-align: center;
            width: 317px;
            height: 100px;
            margin: 0 auto;
            position: relative;
            padding-top: 10px;
            img{
                display: block;
                width: 317px;
                height: 63px;
            }
            .num{
                width: 100%;
                position: absolute;
                top: 0;
            }
            span{
                display: flex;
                justify-content: center;
                margin-bottom: 2px;
                i{
                    display: block;
                    width: 17px;
                    height: 28px;
                    background: #ED5385;
                    margin: 0 2px;
                    font-size: 30px;
                    font-family: DS-Digital;
                    font-weight: 600;
                    line-height: 26px;
                }
            }
        }
        .assy-list{
            width: 450px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            .assy-item{
                width: 150px;
                height: 63px;
                background-size: 100% 100%;
                background-image: url('@/assets/images/housing/bg_l1.png')!important;
                box-sizing: border-box;
                padding-left: 55px;
                line-height: 63px;
                position: absolute;
                &:nth-child(1){
                    left: 5px;
                    bottom: 80px;
                }
                &:nth-child(2){
                    background-image: url('@/assets/images/housing/bg_l2.png')!important;
                    bottom: 26px;
                    left: 90px;
                }
                &:nth-child(3){
                    background-image: url('@/assets/images/housing/bg_l3.png')!important;
                    right: 50px;
                    bottom: 22px;
                }
                &:nth-child(4){
                    background-image: url('@/assets/images/housing/bg_l4.png')!important;
                    top: 40px;
                    right: 21px;
                }
                &:nth-child(5){
                    background-image: url('@/assets/images/housing/bg_l5.png')!important;
                    top: 5px;
                    left: 120px;
                }
                &-title{
                    color: #fff;
                    font-size: 16px;
                    i{
                        font-size: 18px;
                        margin: 0 3px;
                        font-style: normal;
                    }
                }
            }
        }
    }

}
</style>